<template>
    <view>
        <view v-if="isLoad">
            <!-- 导航栏 -->
            <azNavbar navtype="default" customClass="bg-white">
                <template v-slot:header>
                    <view class="header">
                        <view class="padding-lr-sm flex align-center justify-between" style="height: 100%">
                            <view style="width: 200rpx" class="text-block text-bold text-2xl">{{ settingStore.setting.MP_APP_NAME }}</view>

                            <view class="flex align-center">
                                <!-- 自提点 -->
                                <iconSlefAddress />
                                <!-- 消息 -->
                                <numberIcon icon="icon-xiaoxi1" color="#333" type="drop" size="36rpx" />
                                <!-- <view class="icon-xiaoxi1 text-xl"></view> -->
                            </view>
                        </view>
                    </view>
                </template>
            </azNavbar>

            <!-- 轮播图 -->
            <view class="bg-white padding-sm">
                <Swiper v-model="index.ad" :ratio="0.38" radius="24rpx" indicatorDots></Swiper>
            </view>
            <!-- 分类 -->
            <view class="bg-white padding-lr-sm padding-tb-base">
                <classify :category="index.category_goods"></classify>
            </view>

            <view class="margin-lr-sm margin-tb-base">
                <goodsListHome :goods="list"></goodsListHome>
            </view>
        </view>

        <loading v-else />
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getIndexsApi } from "@/api/common";
import { getProductListApi } from "@/api/goods";
import { useSettingStore } from "@/store/module/setting";
import { useMemberStore } from "@/store/module/member";
import { useGetUserinfo } from "@/hooks/getuserinfo";
import { useList } from "@/hooks/uselist";

import azNavbar from "@/components/common/az-navbar.vue";
import iconSlefAddress from "@/components/home/icon-slef-address.vue";
import Swiper from "@/components/goods/goods-swiper.vue";
import classify from "@/components/home/classify.vue";
import goodsListHome from "@/components/goods/goodslist-home.vue";
import numberIcon from "@/components/common/number-icon.vue";
import loading from "@/components/common/loading.vue";

const settingStore = useSettingStore();
const memberStore = useMemberStore();
const index = ref<AnyObject>({});
const isLoad = ref<boolean>(false);

const getIndex = async () => {
    const res: AnyObject = await getIndexsApi({});
    index.value = res.data;
};

const { list, getList } = useList(
    getProductListApi,
    {
        view_username: memberStore.userInfo.username || undefined,
        asc: "desc",
        order: 3
    },
    true
);

onLoad(async () => {
    await Promise.all([getIndex(), getList()]);
    setTimeout(() => {
        isLoad.value = true;
    }, 200);
});

onShow(() => {
    useGetUserinfo();
});
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 100%;
    // background-color: $uni-color-red;

    .logo {
        width: 330rpx;
    }
}
</style>
